<template>
  <div>
    <div class="title-cost">固定耗材成本</div>
    <el-table size="small" border v-loading="loading" :data="list">
      <el-table-column label="耗材名称" align="center" prop="materialName" />
      <!-- <el-table-column label="计算模式" align="center" prop="calculateType">
          <template slot-scope="scope">
         {{scope.row.calculateType==2?'手动':'自动'}}
        </template>
      </el-table-column> -->
      <el-table-column label="消耗量" align="center" prop="amount">
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.amount"
            placeholder="请输入消耗量"
            clearable
            size="small"
            @input="scope.row.amount = scope.row.amount.replace(/[^\d.]/g, '')"
            @keyup.enter.native="
              setNum(
                scope.$index,
                scope.row.amount,
                scope.row.materialPrice,
                scope.row.id
              )
            "
            @blur="
              setNum(
                scope.$index,
                scope.row.amount,
                scope.row.materialPrice,
                scope.row.id
              )
            "
          />
          <div v-else @dblclick="scope.row.isEdit = true">
            {{ scope.row.amount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="materialPrice" />
      <el-table-column label="金额" align="center" prop="money" />
    </el-table>
  </div>
</template>

<script>
import {
  getTechnologyWorkingMaterialCost,
  setTechnologyWorkingMaterialCost,
} from "@/api/technology/cost";
export default {
  data() {
    return {
      loading: false,
      list: [],
      totalMoney: 0,

      workingId: null,
    };
  },
  methods: {
    getList(workingId) {
      this.workingId = workingId;
      getTechnologyWorkingMaterialCost({ workingId: this.workingId }).then(
        (response) => {
          response.rows.forEach((item, i) => {
            item.isEdit = false;
          });
          this.list = response.rows;
          this.loading = false;
        }
      );
    },
    // 输入完消耗量的操作
    setNum(index, amount, materialPrice, id) {
      this.list[index].isEdit = false;
      if (String(amount) == "") {
        return;
      }
      
      // let obj = {
      //   amount: amount,
      //   materialPrice: materialPrice,
      //   id: id,
      //   workingId: this.workingId,
      // };
      this.list[index].amount = parseFloat(amount).toFixed(2);
      this.list[index].money = this.getTotal(
        this.list[index].amount,
        parseFloat(materialPrice)
      );
      this.list.forEach(item=>{
        this.totalMoney+=item.money
      })
      // setTechnologyWorkingMaterialCost(obj).then((res) => {
         this.$emit("costChange",this.totalMoney);
      // });
      
    },

    getTotal(num, price) {
      return (((num * 100) * (price * 100)) / 10000).toFixed(2);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-cost {
  font-weight: bold;
  line-height: 45px;
}
</style>